<template>
  <!-- 添加修改组件 -->

  <el-dialog
    :title="isAdd ? '添加部门' : '修改部门'"
    class="tishi"
    :visible.sync="isShow"
    width="35%"
    @close="closePart"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item style="width: 85%" label="部门名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item style="width: 85%" label="部门编码" prop="code">
        <el-input v-model="ruleForm.code"></el-input>
      </el-form-item>
      <el-form-item style="width: 85%" label="部门负责人" prop="manager">
        <el-input v-model="ruleForm.manager"></el-input>
      </el-form-item>
      <el-form-item style="width: 85%" label="部门介绍" prop="introduce">
        <el-input
          type="textarea"
          :rows="3"
          v-model="ruleForm.introduce"
        ></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('editShow', false)">取 消</el-button>
      <el-button type="primary" @click="edit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  selectDepartments,
  editDepartments,
  addDepartments,
} from "@/api/departments";
export default {
  props: ["isShow", "partId", "isAdd"],
  data() {
    return {
      ruleForm: {
        name: "",
        code: "",
        manager: "",
        introduce: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "请输入部门编码", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        manager: [
          { required: true, message: "请输入部门负责人", trigger: "blur" },
        ],
        introduce: [
          { required: true, message: "请输入部门介绍", trigger: "blur" },
          {
            min: 1,
            max: 300,
            message: "长度在 1 到 300 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    isShow: {
      immediate: true,
      handler() {
        this.getUser();
      },
    },
  },
  methods: {
    async getUser() {
      console.log(this.isAdd);
      if (!this.isAdd) {
        const data = await selectDepartments(this.partId);
        this.ruleForm.name = data.name;
        this.ruleForm.code = data.code;
        this.ruleForm.manager = data.manager;
        this.ruleForm.introduce = data.introduce;
      } else {
        this.ruleForm.name = "";
        this.ruleForm.code = "";
        this.ruleForm.manager = "";
        this.ruleForm.introduce = "";
      }
    },
    edit() {
      this.$refs.ruleForm.validate(async (flag) => {
        if (flag) {
          if (!this.isAdd) {
            const data = await editDepartments(this.partId, this.ruleForm);
            this.$message({
              type: "success",
              message: "修改成功",
            });
            this.$emit("editShow", false);
          } else {
            this.ruleForm.pid = this.partId;
            const data = await addDepartments(this.ruleForm);
            this.$message({
              type: "success",
              message: "添加成功",
            });
            this.$emit("editShow", false);
          }
        }
      });
    },
    closePart() {
      this.$refs.ruleForm.resetFields();
      console.log(1);
    },
  },
};
</script>

<style scoped>
.el-dialog__footer {
  padding: 0px 110px 30px;
}
</style>
